<!--
菜单6：
建筑能耗统计中的
查看详细中的
汝阳市人民医院电量统计图-->
<template>
    <div class="DLQS_chart">
        <div id="total-chart-1"></div>
        <div id="total-chart-2"></div>
    </div>
</template>

<script>
    export default {
        name: "chart",
        data() {
            return {
                pieChart: [335,225,333],
                barChart: {
                    title: '2021年1月总电量(计量单位：千瓦时)',
                    data: [132,123,138,184,132,123,138,184,132,123,138,184,132,123,138,184,132,123,138],
                }
            };
        },
        mounted() {
            this.drawLineChart()
            this.drawPieChart()
        },
        methods: {
            drawLineChart() {
                const chart = this.echarts.init(document.getElementById('total-chart-1'));
                chart.setOption({
                    color: ['#2194EF', '#009933', '#CC6600'],
                    title: {
                        text: this.barChart.title,
                        x: 'center',
                        y: 'top',
                    },
                    tooltip: {},
                    xAxis: {
                        data: Array.from({length: 31}, (v, k) => (k + 1) + '日')
                    },
                    yAxis: {
                        // minInterval: 5000,
                        // interval: 5000
                    },
                    grid: {
                        x: 40,
                        x2: 20
                        // y: 90,
                        // y2: 20
                    },
                    series: [ {
                        name: '用电量1',
                        type: 'bar',
                        data: this.barChart.data
                    }]
                })
            },
            drawPieChart() {
                const chart = this.echarts.init(document.getElementById('total-chart-2'));
                chart.setOption({
                    color: ['#2194EF', '#009933', '#CC6600'],
                    legend: {
                        left: 'center',
                        top: '5%',
                        data: ['动力用电', '科技用电', '其他用电']
                    },
                    series : [
                        {
                            name: '用电统计图',
                            type: 'pie',    // 设置图表类型为饼图
                            radius: '60%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                            labelLine: {
                                show: false
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontWeight: 'bold'
                                }
                            },
                            label: {
                                show: false,
                                // position: 'center'
                            },
                            avoidLabelOverlap: false,
                            data:[          // 数据数组，name 为数据项名称，value 为数据项值
                                {value:this.pieChart[0], name:'动力用电'},
                                {value:this.pieChart[1], name:'科技用电'},
                                {value:this.pieChart[2], name:'其他用电'},
                            ]
                        }
                    ]
                })
            },
        },
    }
</script>

<style scoped>
    .DLQS_chart{
        width: 100%;
        height: 100%;
        position: relative;
    }

    #total-chart-1 {
        height: 100%;
    }

    #total-chart-2 {
        background-color: #fff;
        height: 12em;
        width: 18em;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>
<style>

</style>
